<template>
  <div class="playlists-container">
    <!-- 同步 -->
    <div class="top-card">
      <div class="icon-wrap">
        <!-- 封面 -->
        <img :src="topList.coverImgUrl" alt="" />
      </div>
      <div class="content-wrap">
        <div class="tag">精品歌单</div>
        <!-- 标题 -->
        <div class="title">
          {{ topList.name }}
        </div>
        <!-- 介绍 -->
        <div class="info">
          {{ topList.description }}
        </div>
      </div>
      <!-- 背景 -->
      <img :src="topList.coverImgUrl" alt="" class="bg" />
      <div class="bg-mask"></div>
    </div>
    <div class="tab-container">
      <!-- tab栏 顶部 -->
      <div class="tab-bar">
        <span
          @click="tag = '全部'"
          class="item"
          :class="{ active: tag == '全部' }"
          >全部</span
        >
        <span
          @click="tag = '欧美'"
          class="item"
          :class="{ active: tag == '欧美' }"
          >欧美</span
        >
        <span
          @click="tag = '华语'"
          class="item"
          :class="{ active: tag == '华语' }"
          >华语</span
        >
        <span
          @click="tag = '流行'"
          class="item"
          :class="{ active: tag == '流行' }"
          >流行</span
        >
        <span
          @click="tag = '说唱'"
          class="item"
          :class="{ active: tag == '说唱' }"
          >说唱</span
        >
        <span
          @click="tag = '摇滚'"
          class="item"
          :class="{ active: tag == '摇滚' }"
          >摇滚</span
        >
        <span
          @click="tag = '民谣'"
          class="item"
          :class="{ active: tag == '民谣' }"
          >民谣</span
        >
        <span
          @click="tag = '电子'"
          class="item"
          :class="{ active: tag == '电子' }"
          >电子</span
        >
        <span
          @click="tag = '轻音乐'"
          class="item"
          :class="{ active: tag == '轻音乐' }"
          >轻音乐</span
        >
        <span
          @click="tag = '影视原声'"
          class="item"
          :class="{ active: tag == '影视原声' }"
          >影视原声</span
        >
        <span
          @click="tag = 'ACG'"
          class="item"
          :class="{ active: tag == 'ACG' }"
          >ACG</span
        >
        <span
          @click="tag = '怀旧'"
          class="item"
          :class="{ active: tag == '怀旧' }"
          >怀旧</span
        >
        <span
          @click="tag = '治愈'"
          class="item"
          :class="{ active: tag == '治愈' }"
          >治愈</span
        >
        <span
          @click="tag = '旅行'"
          class="item"
          :class="{ active: tag == '旅行' }"
          >旅行</span
        >
      </div>
      <!-- tab的内容区域 -->
      <div class="tab-content">
        <div class="items">
          <div class="item" v-for="(item, index) in list" :key="index">
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{ item.playCount }}</span>
              </div>
              <!-- 封面 -->
              <img :src="item.coverImgUrl" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
            <p class="name">{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器
    tatao 总条数
    current 当前页
    page-size 每页多少条数据
     -->
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="20"
    >
    </el-pagination>
  </div>
</template>

<script>
// 导入axios
import axios from "axios";
export default {
  name: "recommend",
  data() {
    return {
      // 总条数
      total: 0,
      // 页码
      page: 1,
      // 顶部的推荐歌单
      topList: {},
      // 歌单列表
      list: [],
      // 当前选择的数据
      tag: "全部",
    };
  },

  // 侦听器
  watch: {
    tag() {
      // 当点击类别发生变化后，再调用一次相应的接口
      // 顶部的精品歌单
      this.topData(),
        // 歌单列表
        this.listData();
      // 当分类被修改，页码重置
      this.page = 1;
    },
  },

  // 生命周期钩子，自动调用
  created() {
    // 顶部的精品歌单
    this.topData(),
      // 歌单列表
      this.listData();
  },
  methods: {
    // 抽取的方法一：顶部数据
    topData() {
      axios({
        url: "https://autumnfish.cn/top/playlist/highquality",
        method: "get",
        params: {
          limit: 1,
          cat: this.tag,
        },
      }).then((res) => {
        // console.log(res)
        this.topList = res.data.playlists[0];
      });
    },

    // 抽取的方法二：列表数据
    listData() {
      axios({
        url: "https://autumnfish.cn/top/playlist/",
        method: "get",
        params: {
          limit: 10,
          // 偏移量=（页码-1）*limit
          offset: (this.page - 1) * 10,
          cat: this.tag,
        },
      }).then((res) => {
        // console.log(res)
        this.total = res.data.total;
        // 保存数据
        this.list = res.data.playlists;
      });
    },

    // 页码改变事件
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      // 保存页码
      this.page = val;
      // 重新获取数据
      this.listData();
    },
  },
};
</script>

<style></style>
